<template>
  <div>
    <!--下拉菜单-->
    <ul class="toggle-type">
      <li @click="typeShow">
        <span class="select">{{typeName}}<span class="icon icon-xia"></span></span>
        <ul class="drop-down" v-show="isShowType">
          <li v-for="(type,index) in typeList" :key="index" :class="{active:typeIndex==index}" @click.stop="toggleType(type,index)">{{type.name}}</li>
        </ul>
      </li>
      <li @click="statusShow">
        <span class="select" >{{statusName}}<span class="icon icon-xia"></span></span>

        <ul class="drop-down" v-show="isShoWStatus">
          <li v-for="(status,index) in statusList" :key="index" :class="{active:statusIndex==index}" @click.stop="toggleStatus(status,index)">{{status.name}}</li>
        </ul>
      </li>
    </ul>
    <!--排序导航-->
    <ul class="sort">
      <li :class="{active:sortIndex==0}" @click="syntheticalShow(0)">
        <span>{{syntheticalName}}<span class="icon icon-moreunfold"></span></span>
        <ul class="synthetical" v-show="isShowSynthetical">
          <li v-for="(item,index) in synthetical" :key="index" :class="{active:syIndex==index}" @click.stop="syntheticalClick(item,index)">{{item.name}}</li>
        </ul>
      </li>
      <li class="price" :class="{active:sortIndex==1}" @click="toggleSort(1)">
        <span>
          价格 <span class="icon icon-xiajiang" v-if="!isPrice"></span>
          <span class="icon icon-shangsheng" v-if="isPrice"></span>
        </span>
      </li>
      <li class="number" :class="{active:sortIndex==2}" @click="toggleSort(2)">
        <span>
          出价次数 <span class="icon icon-xiajiang" v-if="!isNumber"></span>
          <span class="icon icon-shangsheng" v-if="isNumber"></span>
        </span>
      </li>
      <li :class="{active:sortIndex==3}">
        <span @click="toggleFilter(3)">筛选 <span class="icon icon-filter1"></span></span>
        <div class="filter" v-show="isShowFilter">
          <div class="filter-dynasty">
            <h3>朝代分类</h3>
            <ul>
              <li v-for="(dynasty,index) in dynastyList" :key="index" :class="{active:dynastyIndex==index}" @click="dynastyClick(index,dynasty.dynastyId)">{{dynasty.dynastyName}}({{dynasty.dynastyCount}})</li>
            </ul>
          </div>
          <div class="filter-price">
            <h3>价格区间</h3>
            <ul>
              <li>
                <input class="weui-input" type="text" placeholder="最低价" v-model="currentPriceMin">
              </li>
              <li class="filter-line"></li>
              <li>
                <input class="weui-input" type="text" placeholder="最高价" v-model="currentPriceMax">
              </li>
            </ul>
          </div>
          <div class="filter-time">
            <ul class="filter-time-title">
              <li>
                <span class="icon icon-circleyuanquan"></span>开拍时间
              </li>
              <li>
                <span class="icon icon-circleyuanquan"></span>结束时间
              </li>
            </ul>
            <ul class="filter-time-box">
              <li class="filter-date">
                <input type="date" v-model="startTime">
                <span class="icon icon-kalendar"></span>
              </li>
              <li class="filter-line"></li>
              <li class="filter-date">
                <input type="date" v-model="endTime">
                <span class="icon icon-kalendar"></span>
              </li>
            </ul>
          </div>
          <div class="filter-btn">
            <button class="weui-btn weui-btn_default btn-reset" @click="resetClick">重置</button>
            <button class="weui-btn weui-btn_warn btn-sub" @click="subFilter">确定</button>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  import {getStatusMapByKey} from '../../../assets/js/tools';
  export default {
    name: "choice",
    data(){
      return {
        bySynthesisAsc:null,//综合排序-升序1
        bySynthesisDesc:null,//综合排序-降序2
        byViewTimesAsc:null,//浏览次数-升序3
        byViewTimesDesc:null,//浏览次数-降序4
        byFollowersNumAsc:null,//收藏最多-升序5
        byFollowersNumDesc:null,//收藏最多-降序6
        byCurrentPriceAsc:null,//当前价格-升序7
        byCurrentPriceDesc:null,//当前价格-降序8
        byBidTimesAsc:null,//出价次数-升序9
        byBidTimesDesc:null,//出价次数-降序10
        byEndTimeAsc:null,//即将结拍-升序11
        byEndTimeDesc:null,//即将结拍-降序12
        byStartTimeAsc:null,//即将开拍-升序13
        byStartTimeDesc:null,//即将开拍-降序14
        byReleaseAsc:null,//最新发布-升序15
        byReleaseDesc:null,//最新发布-降序16
        bySellNumAsc:null,//销量-升序17
        bySellNumDesc:null,//销量-降序18
        byCreditRatingAsc:null,//信用-升序19
        byCreditRatingDesc:null,//信用-降序20

        typeList:[],//拍品类别列表
        statusList:[],//拍品状态列表
        synthetical:[],//综合排序列表

        typeName:'全部拍品',
        statusName:'竞拍中',
        syntheticalName:'综合排序',
        typeIndex:0,
        statusIndex:0,
        syIndex:0,
        sortIndex:0,
        isShowType:false,
        isShoWStatus:false,
        isShowSynthetical:false,
        isShowFilter:false,
        isPrice:false,
        isNumber:false,
        type:null,//拍品类别：一口价 竞拍
        status:null,//拍品状态（11：预展中 12：竞拍中 7：已成交）
        descType:null,//排序：2综合排序，4浏览次数多到少，3浏览次数少到多，6收藏最多，12即将结拍，8价格高到低，7价格低到高，10出价次数高到低，9出价次数低到高

        dynastyIndex:null,
        dynastyId:null,//朝代ID
        currentPriceMin:null,//最低价
        currentPriceMax:null,//最高价
        startTime:null,//开始时间
        endTime:null,//结束时间

        choiceObj:{}
      }
    },
    props:['title','dynastyList'],
    created(){
      //拍品分类
      let eProductType = getStatusMapByKey('eProductType');
      let fixedPrice = eProductType.fixedPrice.val;//一口价1
      let auction =  eProductType.auction.val;//竞拍2
      // this.type = auction;
      this.typeList= [
        {id:null,name:'全部拍品'},
        {id:auction,name:'竞拍拍品'},
        {id:fixedPrice,name:'一口价拍品'},
      ];
      //拍品状态
      let eProductStatus = getStatusMapByKey('eProductStatus');
      let inPreview = eProductStatus['inPreview'].val;//预展中
      let inAuction =  eProductStatus['inAuction'].val;//竞拍中
      let deal =  eProductStatus['deal'].val;//已成交
      this.status = inAuction;
      this.statusList= [
        {id:inAuction,name:'竞拍中'},
        {id:inPreview,name:'预展中'},
        {id:deal,name:'已成交'}
      ];
      //排序类型
      let eOrderByType = getStatusMapByKey('eOrderByType');
      this.bySynthesisAsc = eOrderByType.bySynthesisAsc.val;//综合排序-升序1
      this.bySynthesisDesc = eOrderByType.bySynthesisDesc.val;//综合排序-降序2
      this.byViewTimesAsc = eOrderByType.byViewTimesAsc.val;//浏览次数-升序3
      this.byViewTimesDesc = eOrderByType.byViewTimesDesc.val;//浏览次数-降序4
      this.byFollowersNumAsc = eOrderByType.byFollowersNumAsc.val;//收藏最多-升序5
      this.byFollowersNumDesc = eOrderByType.byFollowersNumDesc.val;//收藏最多-降序6
      this.byCurrentPriceAsc = eOrderByType.byCurrentPriceAsc.val;//当前价格-升序7
      this.byCurrentPriceDesc = eOrderByType.byCurrentPriceDesc.val;//当前价格-降序8
      this.byBidTimesAsc = eOrderByType.byBidTimesAsc.val;//出价次数-升序9
      this.byBidTimesDesc = eOrderByType.byBidTimesDesc.val;//出价次数-降序10
      this.byEndTimeAsc = eOrderByType.byEndTimeAsc.val;//即将结拍-升序11
      this.byEndTimeDesc = eOrderByType.byEndTimeDesc.val;//即将结拍-降序12
      this.byStartTimeAsc = eOrderByType.byStartTimeAsc.val;//即将开拍-升序13
      this.byStartTimeDesc = eOrderByType.byStartTimeDesc.val;//即将开拍-降序14
      this.byReleaseAsc = eOrderByType.byReleaseAsc.val;//最新发布-升序15
      this.byReleaseDesc = eOrderByType.byReleaseDesc.val;//最新发布-降序16
      this.bySellNumAsc = eOrderByType.bySellNumAsc.val;//销量-升序17
      this.bySellNumDesc = eOrderByType.bySellNumDesc.val;//销量-降序18
      this.byCreditRatingAsc = eOrderByType.byCreditRatingAsc.val;//信用-升序19
      this.byCreditRatingDesc = eOrderByType.byCreditRatingDesc.val;//信用-降序20

      this.descType = this.bySynthesisDesc;
      this.synthetical = [//综合排序列表
        {id:this.bySynthesisDesc,name:'综合排序'},
        {id:this.byViewTimesDesc,name:'浏览次数由多到少'},
        {id:this.byViewTimesAsc,name:'浏览次数由少到多'},
        {id:this.byFollowersNumDesc,name:'收藏最多'},
        {id:this.byEndTimeDesc,name:'即将结拍'}
      ];

      this.choiceObj.type = this.type;
      this.choiceObj.status = this.status;
      this.choiceObj.descType = this.descType;
    },
    methods:{
      //朝代切换
      dynastyClick(index,dynastyId){
        this.dynastyIndex = index;
        this.dynastyId = dynastyId;
      },
      //重置
      resetClick(){
        this.dynastyIndex = null;
        this.dynastyId = null;
        this.currentPriceMin = null;
        this.currentPriceMax = null;
        this.startTime = null;
        this.endTime = null;
      },
      //确定
      subFilter(){
        this.choiceObj.dynastyId = this.dynastyId;
        this.choiceObj.currentPriceMin = this.currentPriceMin;
        this.choiceObj.currentPriceMax = this.currentPriceMax;
        this.choiceObj.startTime = this.startTime;
        this.choiceObj.endTime = this.endTime;
        this.$emit("listenToChildEvent",this.choiceObj);
        this.isShowFilter = false;
      },

      //显示拍品类别下拉菜单
      typeShow(){
        this.isShowType=!this.isShowType;
      },
      //切换拍品类别
      toggleType(type,i){
        this.typeIndex = i;
        this.typeName = type.name;
        this.isShowType=!this.isShowType;
        this.type = type.id;
        this.choiceObj.type = this.type;
        this.getSynthetical();
        this.syntheticalName = this.synthetical[0].name;
        this.choiceObj.descType = this.synthetical[0].id;
        this.syIndex = 0;
        this.$emit("listenToChildEvent",this.choiceObj);
      },
      //显示拍品状态下拉菜单
      statusShow(){
        this.isShoWStatus=!this.isShoWStatus;
      },
      //切换拍品状态
      toggleStatus(status,i){
        this.statusIndex = i;
        this.statusName = status.name;
        this.isShoWStatus=!this.isShoWStatus;
        this.status = status.id;
        this.choiceObj.status = this.status;
        this.getSynthetical();
        this.syntheticalName = this.synthetical[0].name;
        this.choiceObj.descType = this.synthetical[0].id;
        this.syIndex = 0;
        this.$emit("listenToChildEvent",this.choiceObj);
      },
      //显示综合排序下拉菜单
      syntheticalShow(i){
        this.sortIndex = i;
        this.isShowSynthetical = !this.isShowSynthetical;
      },
      //切换综合排序
      syntheticalClick(item,i){
        this.syIndex = i;
        this.syntheticalName = item.name;
        this.isShowSynthetical = !this.isShowSynthetical;
        this.descType = item.id;
        this.choiceObj.descType = this.descType;
        this.$emit("listenToChildEvent",this.choiceObj);
      },
      //显示筛选下拉菜单
      toggleFilter(i){
        this.sortIndex = i;
        this.isShowFilter = !this.isShowFilter;
      },
      //切换排序
      toggleSort(i){
        this.sortIndex = i;
        if(i==1){
          this.isPrice = !this.isPrice;
          if(this.isPrice){
            this.descType = this.byCurrentPriceAsc;
          }else {
            this.descType = this.byCurrentPriceDesc;
          }
        }else if(i==2){
          this.isNumber = !this.isNumber;
          if(this.isNumber){
            this.descType = this.byBidTimesAsc;
          }else {
            this.descType = this.byBidTimesDesc;
          }
        }
        this.choiceObj.descType = this.descType;
        this.$emit("listenToChildEvent",this.choiceObj);
      },
      //获取综合排序列表
      getSynthetical(){
        // debugger;
        let synthetical = [];
        if(this.choiceObj.status==this.statusList[1].id) {
          synthetical = [
            {id: this.bySynthesisDesc, name: '综合排序'},
            {id: this.byFollowersNumDesc, name: '收藏最多'},
            {id: this.byStartTimeDesc, name: '即将开拍'}
          ]
        }else if(this.choiceObj.status==this.statusList[0].id){
          if(this.choiceObj.type==this.typeList[2].id){
            synthetical = [
              {id: this.bySynthesisDesc, name: '综合排序'},
              {id: this.byFollowersNumDesc, name: '收藏最多'},
              {id: this.byEndTimeDesc,name: '即将结拍'},
              {id: 2,name: '未限制结拍时间'}
            ]
          }else if(this.choiceObj.type==this.typeList[1].id){
            synthetical = [
              {id:this.bySynthesisDesc,name:'综合排序'},
              {id:this.byViewTimesDesc,name:'浏览次数由多到少'},
              {id:this.byViewTimesAsc,name:'浏览次数由少到多'},
              {id:this.byFollowersNumDesc,name:'收藏最多'},
              {id:this.byEndTimeDesc,name:'即将结拍'}
            ]
          }else {
            synthetical = [
              {id:this.bySynthesisDesc,name:'综合排序'},
              {id:this.byViewTimesDesc,name:'浏览次数由多到少'},
              {id:this.byViewTimesAsc,name:'浏览次数由少到多'},
              {id:this.byFollowersNumDesc,name:'收藏最多'},
              {id:this.byEndTimeDesc,name:'即将结拍'}
            ]
          }
        }else if(this.choiceObj.status==this.statusList[2].id){
          synthetical = [
            {id:this.bySynthesisDesc,name:'综合排序'},
            {id:this.byFollowersNumDesc,name:'收藏最多'},
          ]
        }
        this.synthetical = synthetical;
      }
    },


  }
</script>

<style scoped>
  /*下拉菜单*/
  .toggle-type{
    display: flex;
    justify-content: space-between;
    padding: 0 0.5rem;
    padding-top: 0.65rem;
    background-color: #FFFFFF;
  }
  .toggle-type>li{
    width: 45%;
    border: 1px solid #999999;
    border-radius: 2px;
    position: relative;
    color: #656565;
    font-size: 0.7rem;
  }
  .select{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5px;
    height: 25px;
    line-height: 25px;
  }
  .select .icon-xia{
    color: #656565;
  }
  .drop-down{
    position: absolute;
    top: 26px;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0px 1px 23px 0px rgba(0,0,0,0.2);
    border-radius: 2px;
    z-index: 10;
  }
  .drop-down li{
    text-align: center;
    line-height: 35px;
    border-bottom: 1px solid #F2F2F2;
    color: #282828;
    font-size: 0.7rem;
  }
  .drop-down li:last-child{
    border-bottom: none;
  }
  .drop-down li.active{
    color: #C50000;
  }
  /*筛选*/
  .filter{
    position: absolute;
    left: 0;
    right: 0;
    background: #ffffff;
    z-index: 99;
    top: 1.75rem;
    padding-top: 0.5rem;
    box-shadow: 0px 5px 5px 0 rgba(0,0,0,0.3);
  }
  .filter h3{
    font-size: 0.75rem;
    color: #282828;
  }
  .filter-price{
    padding: 0 5%;
  }
  .filter-dynasty h3{
    padding: 0 5%;
  }
  .filter-dynasty ul{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-left: 5%;
    padding-top: 0.75rem;
    padding-bottom: 0.5rem;
    padding-right: 3.4%;
  }
  .filter-dynasty li{
    margin-right: 1.6vw;
    color: #656565;
    font-size: 0.65rem;
    margin-bottom: 0.3rem;
    padding: 0.2rem 0.4rem;
    border-radius: 2px;
    background: #f2f2f2;
  }
  .filter-dynasty li:nth-child(3n+3){
    /*margin-right: 0;*/
  }
  .filter-dynasty li.active{
    background-color: #efeff4;
  }
  .filter-price ul{
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    align-items: center;
  }
  .filter-line{
    height: 1px;
    background-color: #C3C3C3;
    width: 8.8vw;
  }
  .filter-price input{
    width: 36.8vw;
    border: 1px solid #C3C3C3;
    height: 1.5rem;
    line-height: 1.5rem;
    box-sizing: border-box;
    padding: 0 5px;
    color: #282828;
  }
  .filter-price input::-webkit-input-placeholder{
    color: #656565;
    font-size: 0.7rem;
    text-align: center;
  }
  .filter-time{
    margin-top: 0.5rem;
    padding: 0 5%;
  }
  .filter-time .filter-time-title{
    display: flex;
    justify-content: space-between;
  }
  .filter-time-title li{
    width: 36.8vw;;
    color: #282828;
    font-size: 0.75rem;
  }
  .filter-time .icon-circleyuanquan{
    margin-right: 0.5rem;
    color: #999999;
  }
  .filter-time-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
  }
  .filter-date{
    width: 36.8vw;
    display: flex;
    border: 1px solid #C3C3C3;
    border-radius: 2px;
    height: 1.5rem;
    align-items: center;
    padding-right: 2px;
  }
  .filter-date input{
    border: none;
    outline: none;
  }
  .filter-date input:focus{
    border: none;
    outline: none;
  }
  .filter-date .icon-kalendar{
    font-size: 1.1rem;
  }
  .filter-btn{
    display: flex;
    margin-top: 1.5rem;
  }
  .weui-btn + .weui-btn{
    margin-top: 0;
  }
  .filter-btn .weui-btn{
    border-radius: 0;
    font-size: 0.7rem;
    line-height: 2.5rem;
  }
  .btn-reset{
    background-color: #C3C3C3;
    color: #282828;
  }
</style>
